<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>小鱼ADMIN</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="/public/static/css/font.css">
		<link rel="stylesheet" href="/public/static/css/bgadmin.css">
		<script type="text/javascript" src="/public/static/js/jquery-1.8.0.min.js"></script>
		<script type="text/javascript" src="/public/static/lib/layui/layui.js" charset="utf-8"></script>
		<script type="text/javascript" src="/public/static/lib/echarts/echarts.js" charset="utf-8"></script>
		<script type="text/javascript" src="/public/static/js/bgadmin.js"></script>
    </head>
	<style>
	body{background-color:#FAFAFA;}
	.custom-row-md3{
		height:245px;
		margin-bottom:22px;
	}
	.custom-row-down{
		margin-right:22px;
	}
	.custom-row-md3 .layui-col-xs6{
		height:245px;
		padding-right:20px;
	}
	.layui-col-xs6 .custom-row-md3{
		height:245px;
	}
	.grid-content{
		width:100%;
		height:100%;
		border-radius:3px;
		box-shadow: 0px 0px  2px 1px #e2e2e2;
		background-color:#fff;
	}
	.custom-tittle{
		height:40px;
		padding:10px;
		font-size:15px;
		color:#5E5E5E;
	}	
	.custom-money{
		height:100px;
		line-height:80px;
		font-size:35px;
		color:#FFB800;
		padding-left:30px;
	}
	#realtimeData_money {
		font-size:35px;
	}
	.iconfont1{
		font-size:35px;
		color:#FFB800;
		padding-right:20px;
	}
	.border{
		border-right:1px solid #f2f2f2;
	}
	.layui-col-md4 p{
		line-height:30px;
		font-size:16px;
		color:#5E5E5E;
		text-align:center;
	}
	.layui-col-md4 p font{
		font-size:18px;
		color:#1E9FFF;
	}
	.custom-head-img{
		height:120px;padding-left:40px;
	}
	.layui-col-md7 p{
		text-align:left;
	}
	.layui-carousel{
		height:200px;
	}

	.plan{
		height:50px;
		line-height:50px;
		font-size:20px;
		color:#FFB800;
		padding-left:15px;
	}

	.plan-rate{
		height:60px;
		line-height:60px;
		font-size:35px;
		color:#FFB800;
		text-align: center;
	}

	.complete{
		height:65px;
		line-height:30px;
		font-size:20px;
		color:#FF5722;
		padding-left:15px;
	}

	.hot-news{
		height:30px;
		padding-left:20px;
		padding-right:15px;
		font-size:15px;
		color:#666;
		text-indent: 2em;
	}

	.center-tittle{
		height:40px;
		padding-top:10px;
		padding-bottom:10px;
		text-align: center;
		cursor: pointer;
		font-size:15px;
		color:#5E5E5E;
	}

	.class-title{
		height:20px;
		padding-top: 10px;
		padding-bottom: 10px;
		text-align: center;
		cursor: pointer;
		font-size:12px;
		color:#CC9999;
		border-bottom: 1px solid #CC9999;
		margin-left: 30px;
		margin-right: 30px;
	}
	.news-tittle{
		height:40px;
		padding-top:15px;
		text-align: center;
		cursor: pointer;
		font-size:15px;
		color:#555;
		margin-left: 30px;
		margin-right: 30px;
	}

	</style>
    <body>
        <div class="bg-body">
		<div class="layui-row">
		    <div class="layui-col-xs12 layui-col-md8">
				<div class="custom-row-md3">
					<div class="layui-col-xs6">
					  <div class="grid-content">
						<p class="custom-tittle">今日实时数据</p>
						<p class="custom-money">
							<i class="iconfont1">&#xe6ed; </i>
							￥ <span id="realtimeData_money"></span>
						</p>
						<p class="custom-foot layui-row layui-col-space1">
							<li  class="layui-col-md4 border">
								<p><font id="realtimeData_total"></font> 单</p>
								<p>已下订单</p>
							</li>
							<li  class="layui-col-md4 border">
								<p><font id="realtimeData_num"></font> 单</p>
								<p>审核通过订单</p>
							</li>
							<li  class="layui-col-md4">
								<p><font  id="realtimeData_rate"></font> </p>
								<p>审核率</p>
							</li>
						</p>
					  </div>
					</div>
					<div class="layui-col-xs6">
					  <div class="grid-content" id="main"></div>
					</div>
				</div>
				<div class="custom-row-md3">
					<div class="layui-col-xs6">
					  <div class="grid-content" id="main1"></div>
					</div>
					<div class="layui-col-xs6">
					  <div class="grid-content">
						<div class="center-tittle" style="padding-left: 50px;padding-right: 60px;">今日目标已完成</div>
						<div style="height:100px; padding-left: 50px;padding-right: 60px;">
							<div class="plan-rate" id="plan_rate">0%</div>
							<div class="layui-progress">
								<div class="layui-progress-bar layui-bg-blue" lay-percent="0%" id="plan_progress_bar"></div>
							</div>
						</div>
						<div style="height:70px;">
							<div class="layui-col-md6 complete border">
							  <p style="text-align: center;">
								<i class="iconfont1" style="font-size: 20px;padding-right: 5px;color:#FF5722;">&#xe6d1; </i>
								<span style="font-size: 18px;">
									今日目标
            						{if condition="empty($_SESSION['target']['daily'])"}
									<button class="layui-btn layui-btn-mini layui-btn-radius layui-btn-normal" onclick="bg_admin_show('设置今日目标','./setTarget.html?type=daily',500,300)">&nbsp;设 置&nbsp;</button>
									{/if}
								</span>
							  </p>
							  <p style="text-align: center;"><span style="font-size: 18px;">{$_SESSION['target']['daily']}</span></p>
							</div>
							<div class="layui-col-md6 complete">
							  <p style="text-align: center;">
								<i class="iconfont1" style="font-size: 20px;padding-right: 5px;color:#FF5722;">&#xe68d; </i>
								<span style="font-size: 18px;">
									本月目标
            						{if condition="empty($_SESSION['target']['monthly'])"}
									<button class="layui-btn layui-btn-mini layui-btn-radius layui-btn-normal" onclick="bg_admin_show('设置当月目标','./setTarget.html?type=monthly',500,300)">&nbsp;设 置&nbsp;</button>
									{/if}
								</span>
							  </p>
							  <p style="text-align: center;"><span style="font-size: 18px;">{$_SESSION['target']['monthly']}</span></p>
							</div>
						</div>
					  </div>
					</div>
				</div>
			</div>
			<div class="layui-col-xs6 layui-col-md4">
				<div class="custom-row-md3">
					<div class="grid-content">
						<div class="custom-tittle">用户基本信息</div>
						<div style="height:40px;font-size:15px;color:#5E5E5E;padding-left:10px;">登陆时间：{$_SESSION['user_info']['login_datetime']}</div>
						<div  class="layui-row layui-col-space15" style="height:165px;">
							<div class="layui-col-md5">
								<img src="/public/static/crm/image/head.jpg" class="custom-head-img">
							</div>
							<div class="layui-col-md7">
								<p>姓名：{$_SESSION['user_info']['cn_name']}</p>
								<p>工号：{$_SESSION['user_info']['username']}</p>
								<p>角色：{$user_role}</p>
							</div>
						</div>
					</div>
				</div>
				<div class="custom-row-md3">
					<div class="grid-content">
						<div class="layui-carousel" id="test10">
						  <div carousel-item="">
							{volist name="pictureList" id="vo"}
							<div><img src="/public/uploads/{$vo.src}"></div>
							{/volist}
						  </div>
						</div>
					</div>
				</div>
			</div>
        </div>
		</div>
    </body>
    <script>
    	// 今日实时数据
    	$(function(){
    		$.ajax({
    			type: 'post',
    			url : '/index.php/crm/Index/realtimeData',
    			dataType : 'json',
    			success : function (result) {
    				$('#realtimeData_money').html(result.adopt_money);
    				$('#realtimeData_total').html(result.total);
    				$('#realtimeData_num').html(result.adopt_num);
    				$('#realtimeData_rate').html(result.adopt_rate);
    				// alert(result.total)
    			}
    		})
    		
    	})
    </script>

	<script type="text/javascript">
		// 今日订单数据
		$(function(){
			$.ajax({
				type: 'post',
				url : '/index.php/crm/Index/orderData',
				dataType : 'json',
				success : function (result) {
					// alert(result.length)
					var order = new Array, pass = new Array, hours = new Array;
					var order_num = 0, pass_num = 0;

					if (result.length > 0) {
						order.push(order_num);
						pass.push(pass_num);
						hours.push(result[0].hours+':00');
						for (var i = 0; i < result.length; i++) {
							order_num += result[i].total;
							pass_num += result[i].adopt_num;
							order.push(order_num);
							pass.push(pass_num);
							hours.push((parseInt(result[i].hours)+1)+':00');
						}
					} else {
						order.push(0);
						pass.push(0);
						hours.push('9:00');

						order.push(0);
						pass.push(0);
						hours.push('10:00');
					}
					




			        // 基于准备好的dom，初始化echarts实例
			        var myChart = echarts.init(document.getElementById('main'));
			        // 指定图表的配置项和数据
			        option = {
						title: {
							text: '今日订单数据',
							textAlign: 'left',
							textStyle:{
								color:'#5E5E5E',
								fontSize:15,
								fontWeight:'normal'
							},
							padding:10
						},
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								lineStyle: {
									color: '#ddd'
								}
							},
							backgroundColor: 'rgba(255,255,255,0.8)',
							padding: [5, 10],
							textStyle: {
								color: '#7588E4',
							},
							extraCssText: 'box-shadow: 0 0 5px rgba(0,0,0,0.3)'
						},
						legend: {
							right: 20,
							orient: 'vertical',
							data: ['下单','核过']
						},
						xAxis: {
							type: 'category',
							data: hours,
							boundaryGap: false,
							splitLine: {
								show: true,
								interval: 'auto',
								lineStyle: {
									color: ['#D4DFF5']
								}
							},
							axisTick: {
								show: false
							},
							axisLine: {
								lineStyle: {
									color: '#609ee9'
								}
							},
							axisLabel: {
								margin: 10,
								textStyle: {
									fontSize: 14
								}
							}
						},
						yAxis: {
							type: 'value',
							splitLine: {
								lineStyle: {
									color: ['#D4DFF5']
								}
							},
							axisTick: {
								show: false
							},
							axisLine: {
								lineStyle: {
									color: '#609ee9'
								}
							},
							axisLabel: {
								margin: 10,
								textStyle: {
									fontSize: 14
								}
							}
						},
						series: [{
							name: '下单',
							type: 'line',
							smooth: true,
							showSymbol: false,
							symbol: 'circle',
							symbolSize: 6,
							data: order,
							areaStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: 'rgba(199, 237, 250,0.5)'
									}, {
										offset: 1,
										color: 'rgba(199, 237, 250,0.2)'
									}], false)
								}
							},
							itemStyle: {
								normal: {
									color: '#f7b851'
								}
							},
							lineStyle: {
								normal: {
									width: 3
								}
							}
						}, {
							name: '核过',
							type: 'line',
							smooth: true,
							showSymbol: false,
							symbol: 'circle',
							symbolSize: 6,
							data: pass,
							areaStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: 'rgba(216, 244, 247,1)'
									}, {
										offset: 1,
										color: 'rgba(216, 244, 247,1)'
									}], false)
								}
							},
							itemStyle: {
								normal: {
									color: '#58c8da'
								}
							},
							lineStyle: {
								normal: {
									width: 3
								}
							}
						}]
					};
			        // 使用刚指定的配置项和数据显示图表。
			        myChart.setOption(option);
				}
			})
			
		})
    </script>

	<script type="text/javascript">
		// 客户分群统计
		$(function(){
    		$.ajax({
    			type: 'post',
    			url : '/index.php/crm/Index/customerGroupCount',
    			dataType : 'json',
    			success : function (result) {
			        // 基于准备好的dom，初始化echarts实例
			        
			        // alert(JSON.stringify(result))
			        
			        var myChart1 = echarts.init(document.getElementById('main1'));

			        // 指定图表的配置项和数据
					option1 = {
						title: {
							text: '客户分群统计',
							textAlign: 'left',
							textStyle:{
								color:'#5E5E5E',
								fontSize:15,
								fontWeight:'normal'
							},
							padding:10
						},
						//color: ['#3398DB'],
						tooltip: {
							trigger: 'axis',
							backgroundColor:'rgba(255,255,255,0.8)',
							extraCssText: 'box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);',
							textStyle:{
								color:'#6a717b',
							},
							 
						}, 
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						yAxis: [{
							type: 'category',
							data: ['最近30天未购物','最近60天未购物','最近90天未购物','最近半年未购物'],
							
							axisTick: {
								alignWithLabel: true,
							   
							  
							},
							 axisLabel: {
								margin: 10,
								textStyle: {
									fontSize: 12,
									color:'#94999f'
									}
							},
							 axisLine: {
								lineStyle: {
									color: '#dbe0e6'
								}
							 },
							 
						}],
						xAxis: [{
							type: 'value',
							 axisLabel: {
								margin: 10,
								textStyle: {
									fontSize: 12,
									color:'#94999f'
									}
							},
							 axisLine: {
								lineStyle: {
									color: '#fff'
								}
							 },
							 splitLine: {
								lineStyle: {
									color: '#dbe0e6'
								}
							}
							 
							 
							
						}],
						backgroundColor: '#ffffff',
						series: [{
							name: '客户数量',
							type: 'bar',
							barWidth:30,
							data: [result.one_month, result.two_month, result.three_month, result.six_month],
							label: {
								normal: {
									show: true,
									position: 'insideRight',
									textStyle: {
										color: 'white' //color of value
									}
								}
							},
							itemStyle: {
								
								normal: {
									color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
										offset: 0,
										color: '#64bdc8' // 0% 处的颜色
									}, {
										offset: 1,
										color: '#00c484' // 100% 处的颜色
									}], false),
									barBorderRadius: [0, 15,15, 0],
									shadowColor: 'rgba(0,0,0,0.1)',
									shadowBlur: 3,
									shadowOffsetY: 3
								}
							}
						}]
					};

			        // 使用刚指定的配置项和数据显示图表。
			        myChart1.setOption(option1);
    			}
    		})
    		
    	})
    </script>

	<script>
		// 目标完成情况
		$(function(){
			$.ajax({
				type: 'post',
				url : '/index.php/crm/Index/getTarget',
				success : function (result) {
					$('#plan_rate').html(result+'%');
					if(parseInt(result) > 100) {
						$('#plan_progress_bar').attr('lay-percent', '100%')
					} else {
						$('#plan_progress_bar').attr('lay-percent', result+'%')
					}
				}
			})
			
		})


	</script>

	<script>
	layui.use(['carousel', 'form'], function(){
	  var carousel = layui.carousel
	  ,form = layui.form;
	  
	  //图片轮播
	  carousel.render({
		elem: '#test10'
		,width:'100%'
		,height: '245px'
		,interval: 5000
	  });
	  
	});
	</script>

</html>